<template>
  <div class="mainBox">
    <div class="topCard center">
      <div class="card">
        <div class="cardBak">
          <img src="../../assets/image/qualityDetils/qualityDetilsBAkCard.png" alt="" srcset="" />
        </div>
        <div class="cardCenter">
          <div class="cardCenterTop aliCenter">
            <div class="logo">
              <img src="../../assets/image/logo.png" alt="" srcset="" />
            </div>
            <div class="title">{{ dayjs(detils.workTime).format('YYYY-MM-DD') }}</div>
          </div>
          <div class="cardCenterCenter title">Quad Film E-Warranty</div>
          <div class="cardCenterCenter title">{{ detils.filmName }}</div>
          <div class="cardCenterFoot size">
            <div>{{ detils.filmAge }} Years Warranty</div>
            <div>No:{{ detils.filmNo }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Customer Information</div>
            <div></div>
          </div>
          <div class="cardContent">
            <el-row>
              <el-col :span="12" class="col size2">
                <div>First Name:{{ detils.ownerFirstName }}</div>
              </el-col>
              <el-col :span="12" class="col size2">
                <div>Last Name:{{ detils.ownerLastName }}</div>
              </el-col>

              <el-col :span="12" class="col size2">
                <div>Phone Number: {{ detils.ownerPhone }}</div>
              </el-col>
              <el-col :span="12" class="col size2">
                <div>Email:{{ detils.ownerEmail }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Vehicle Information</div>
            <div></div>
          </div>
          <div class="cardContent">
            <el-row>
              <el-col :span="24" class="col size2">
                <div>Brand and Mode:{{ detils.carName }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>License Plate Number:{{ detils.carNo }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Chassis Number (VIN):{{ detils.carVIN }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Installation Part:{{ detils.carApart }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Store Information</div>
            <div></div>
          </div>
          <div class="cardContent">
            <el-row>
              <el-col :span="24" class="col size2">
                <div>Store Name: {{ detils.storeWorkName }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Store Address: {{ detils.region }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Store Phone Number: {{ detils.storeWorkPhone }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Warranty Information</div>
            <div></div>
          </div>
          <div class="cardContent">
            <el-row>
              <el-col :span="24" class="col size2">
                <div>Warranty Period: {{ detils.filmAge }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Warranty Serial Number: {{ detils.filmNo }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Product Batch Number: {{ detils.SerialNumber }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Product Type: {{ detils.filmType }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Product Model: {{ detils.filmName }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Remarks:{{ detils.remark }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Please upload corresponding photos</div>
            <div></div>
          </div>
          <div class="cardContent upImage">
            <el-row>
              <el-col v-for="(item, index) in imageList" :key="index" :span="6" class="col size2">
                <div>
                  <div class="uploadImage">
                    <img :src="item.image" alt="" srcset="" />
                  </div>
                  <div class="imgFootText">{{ item.title }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="listBox center">
        <div class="card">
          <div class="cardTop title aliCenter">
            <div>Tips</div>
            <div></div>
          </div>
          <div class="cardContent">
            <div class="size">
              1. lf only one number is added, the start number and the end numberare consistent.<br />2.
              lf you need to ship in batches and the numbers are sequential, youonly need to start
              numberingFill in the minimum number and the maximum number in the End number".<br />
              3. The end number shall not be less than the start number.<br />4. The start number
              and end number should be consistent in lengthpif the length is inconsistent or
              knittedThe number is not consecutive, please ship it separately,<br />5.Click"Generate
              Warranty Serial Number" The system will automaticallyggenerate a continuous number.<br />6.lssueAfter
              the goods are successful, please remind the consignee ein time
            </div>
          </div>
        </div>
      </div>
      <div class="footButtonS center" style="justify-content: space-around">
        <div class="footButton center size" @click="ReturnFn(1)">Return</div>
        <div class="footButton center size" v-if="showChange" @click="ReturnFn(2)">Amend</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { qualityDetilsSmall } from '@/http/api/my.js'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
let detils = reactive({})
let imageList = ref([])
let showChange = ref(localStorage.getItem('userInfo') ? false : true)
const getData = async () => {
  const res = await qualityDetilsSmall({ id: route.query.id })
  res.res[0].carName = JSON.parse(res.res[0].carName).join('/')
  Object.assign(detils, res.res[0])
  imageList.value = JSON.parse(res.res[0].imgList)
}
const ReturnFn = (num) => {
  if (num == 1) {
    router.go(-1)
  } else {
    router.push(`/WarrantyChange?id=${detils.id}`)
  }

}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.mainBox {
  min-height: 100vh;
  background: #15191a;
  padding: 50px 0;
}
.topCard {
  width: 100%;
  position: relative;
  .card {
    width: 1850px;
    height: 450px;
    border-radius: 50px;
    overflow: hidden;
    position: relative;

    .cardBak {
      width: 1850px;
      height: 450px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.listBox {
  width: 100%;
  margin-top: 45px;
  cursor: pointer;
  .card {
    width: 1800px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      margin: 0 0 10px 0;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 20px;
      font-size: 24px;
      color: white;
    }
  }
}
.upImage {
  height: 500px;
}
.cardCenter {
  padding: 20px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.cardCenterTop {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  .size {
    color: #ffdd00;
    font-size: 50px;
    font-weight: bold;
  }
}
.cardCenterCenter {
  width: 100%;
  text-align: center;
  font-size: 50px;
  margin-top: 30px;
}
.cardCenterFoot {
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  color: #ffdd00;
  margin-top: 20px;
}
.uploadImage {
  width: 400px;
  height: 400px;
  img {
    width: 100%;
    height: 100%;
  }
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}
::v-deep .el-dialog {
  padding: 0;
  border-radius: 20px;
  width: 1800px;
}
::v-deep .el-dialog__header {
  padding: 0;
}
.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-dialog__body2 {
  width: 800px !important;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
.inpute1 {
  width: 800px;
}
.inpute2 {
  width: 1290px;
}
.inpute3 {
  width: 500px;
}

.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
.imgFootText {
  text-align: center;
}
.footButtonS {
  padding: 0 150px;
  margin-top: 50px;
  .footButton {
    width: 180px;
    height: 70px;
    background: #ffdd00;
    color: black;
    // text-align: center;
    font-size: 25px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
  }
  .footButton:active {
    background: black;
    color: white;
  }
}
</style>